<template>
	<view>
		<view class="swipers">
			<swiper :autoplay="false" :current="currentIndex" :circular="true" previous-margin="80rpx" next-margin="80rpx"
			 :interval="3000" :duration="100" @change="swierChange">
				<swiper-item class="" v-for="(item,i) in 4" :key="i">
					<view class="slide-image" :class="currentIndex === i?'active':''">
						<image class="img" src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
						<view class="bj-txt">
							<view class="Advantage">
								<image src="/static/timg.jpg" mode=""></image>
								<view class="right">
									<view class="right-text">
										<text>JAVEN</text>
										<text>美发师</text> | <text>高级</text>
									</view>
									<view class="score">
										<text>4.2分</text>
									</view>
								</view>
							</view>
						</view>
						<view class="picer">
							<text class="picer1">￥699</text>
							<text class="picer2">￥1699</text>
						</view>
						<view class="swiper-text">
							马卡龙染发+然后护理
						</view>
					</view>
				</swiper-item>
			</swiper>

		</view>
		<view class="aa">
			<text>123123人想买</text>
			<view class="img-img">
				<image src="/static/timg.jpg" mode=""></image>
			</view>
		</view>
		<view class="cen-data">
			<view class="cen-data-top">
				<text>距离结束还剩</text>
				<u-count-down :timestamp="timestamp" :show-border="false" font-size="28" color="#fff" bg-color="#333" padding="8">
				</u-count-down>
			</view>
			<view class="cen-data-bom">时刻关注附近沙龙活动动态</view>
		</view>
		<view class="conton-top">
			<view class="tab_list">
				<view v-for="(item,index) in tab_list" :key='index' :class="{items:true,items_active:tab_index==index}" @click="tabs1(index)">{{item}}</view>

			</view>
			<view v-show="tab_index == 0">
				<view class="cen-top">				
					<view class="cen-con" v-for="(item,index) in 3" :key="index">
						<view class="cen-con-img">
							<image src="/static/timg.jpg" mode=""></image>
						</view>
						<view class="cen-con-right">
							<view class="con-right-top">
								<view class="right-top-left">
									<view class="left-pirce">
										<text style="color:  #000;font-size:30rpx;margin-right: 10rpx;">洗剪吹</text>
										<text>发型提案+裁剪+造型</text>
									</view>
									<view class="left-text1">洗剪吹</view>
									<view class="left-text2">
										<image src="/static/timg.jpg" mode=""></image>
										<text>152人已经拼购</text>
									</view>
								</view>								
								<view class="right-top-right">
									<view class="ma1">￥399</view>
									<view class="ma2">￥99</view>
									<view class="ma">马上团</view>
								</view>
							</view>
							<view class="con-bom">
								<image src="/static/timg.jpg" mode=""></image>
								<view class="bom-right">
									<view class="bom-right-top">
										<text class="rtext">Tony 美发师</text>
										<view>高级</view>
										<view class="ico_x">
											<view>
												<text class="icon iconfont" v-for="(indexs,indexs) in 3" :key="indexs">&#xe621;</text>
											</view>
										</view>

									</view>

									<view class="bom-right-bom">
										<view class="bom-score">
											<text class="score">4.7分</text>
											<text class="score">很棒</text>
											<text>128条点评</text>
											<text>234次服务</text>
										</view>
										<view class="distance">2.6km</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab_list: ['美发', '美容', '美肤', '美妆', '美体', '美甲'],
				tab_index: 0,
				timestamp: 86400,
				count: 3,
				value: 3,
				currentIndex: 0,
				list: [

				],
			}
		},
		methods: {
			tabs1(index) {
				this.tab_index = index
			},
			swierChange(e) {
				this.currentIndex = e.detail.current
			},
		}
	}
</script>

<style lang="scss">
	.cen-data {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #e0e0e0;
	
		.cen-data-top {
			height: 35rpx;
			line-height: 35rpx;
			display: flex;
			align-items: center;
			justify-content: center;
	
			text {
				font-size: 26rpx;
				color: #000000;
				font-weight: 500;
				font-family: PingFang;
				margin-right: 20rpx;
			}
	
			.u-countdown-item.data-v-7ebf7480 {
				padding: 8rpx;
			}
		}
	
		.cen-data-bom {
			margin-top: 25rpx;
			font-size: 20rpx;
			color: #7c7c7c;
			text-align: center;
		}
	}
	.conton-top {


		.tab_list {
			padding: 30rpx 30rpx 0 30rpx;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			background-color: #f0f0f0;

			.items_active {
				border-bottom: 7rpx solid #00C6C2;
				font-weight: bold !important;
				color: #00C6C2 !important;
			}

			.items {
				height: 60rpx;
				font-size: 32rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #000;
			}
		}

		.cen-top {
			padding: 0 30rpx;

			

			.cen-con {
				width: 100%;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #EEEEEE;
				display: flex;
				align-items: center;

				.cen-con-img {
					width: 170rpx;
					height: 200rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.cen-con-right {
					padding-left: 30rpx;
					width: 70%;

					.con-right-top {
						display: flex;

						justify-content: space-between;

						.right-top-left {

							.left-pirce {
								font-family: PingFang SC Bolb;

								text {
									font-size: 17rpx;
									color: #727272;

									.pirces {
										text-decoration: line-through;
									}
								}
							}

							.left-text1 {
								font-size: 26rpx;
								color: #000000;
								font-weight: 500;
								font-family: PingFang SC;
								margin: 10rpx 0;
							}

							.left-text2 {
								font-size: 22rpx;
								color: #494949;
								font-family: PingFang SC;
								display: flex;
								align-items: center;
								
								image{
									width: 44rpx;
									height: 44rpx;
									border-radius: 50%;
								}
							}
						}

						.right-top-right {
							text-align: center;
							
							.ma1{
								color:  #00c6c2;
								font-size: 40rpx;
								
							}
							.ma2{
								color:  #ccc;
								font-size: 22rpx;
								text-decoration: line-through;
							}

							.ma{
								padding: 10rpx 14rpx;
								background-color: #00c6c2;
								font-size: 28rpx;
								color: #fff;
							}
						}
					}

					.con-bom {
						padding-top: 15rpx;
						display: flex;
						align-items: center;



						image {
							width: 55rpx;
							height: 55rpx;
							border-radius: 50%;
						}

						.bom-right {
							padding-left: 20rpx;
							width: 84%;

							.bom-right-top {
								display: flex;
								align-items: center;


								.rtext {
									font-size: 18rpx;
									color: #000000;
									font-weight: 500;
									font-family: PingFang SC;
									margin-right: 15rpx;
								}

								view {
									margin-right: 5rpx;
									font-size: 16rpx;
									color: #333333;
								}

								.ico_x {

									line-height: 10rpx;

									.iconfont {
										color: #F2CB51;
										font-size: 16rpx;
									}
								}

							}

							.bom-right-bom {

								display: flex;
								align-items: center;
								justify-content: space-between;

								.bom-score {
									font-size: 16rpx;
									color: #373737;

									.score {
										font-size: 18rpx;
										color: #000000;
										font-weight: 500;
										margin-right: 8rpx;
									}

									text {
										margin-right: 10rpx;
									}
								}

								.distance {
									font-size: 16rpx;
									color: #373737;
								}
							}
						}
					}
				}
			}
		}
	}

	.aa {
		margin-top: 5rpx;
		padding: 20rpx 40rpx 20rpx 20rpx;
		background-color: #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;

		text {
			font-size: 24rpx;
			color: #000000;
		}

		.img-img {

			image {
				width: 44rpx;
				height: 44rpx;
				border-radius: 50%;
			}
		}
	}

	.swipers {
		width: 100%;
		padding: 40rpx 0;
		background-color: #00c6c2;

		swiper {
			height: 440rpx;
			position: relative;
		}

		.slide-image {
			position: absolute;
			height: 380rpx;
			width: 550rpx;
			border-radius: 15rpx;
			z-index: 5;
			opacity: 0.7;
			top: 6%;
			margin: 0 20rpx;

			.img {
				height: 368rpx;
				width: 100%;

			}

			.bj-txt {
				width: 100%;
				position: absolute;
				bottom: 14%;
				background: rgba($color: #000000, $alpha: 0.5);

				.Advantage {
					padding: 20rpx 0 58rpx 20rpx;
					display: flex;
					align-items: center;

					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%
					}

					.right {
						padding-left: 20rpx;
						color: #fff;

						.right-text {
							text {
								font-size: 20rpx;
								margin-right: 15rpx;
							}
						}

						.score {
							font-size: 24rpx;
						}
					}
				}
			}

			.picer {
				position: absolute;
				bottom: 14%;
				padding: 7rpx 17rpx;
				background-color: #fff;

				.picer1 {
					font-size: 32rpx;
					color: #ff3a3a;
				}

				.picer2 {
					font-size: 20rpx;
					color: #777777;
					text-decoration: line-through;
					margin-left: 20rpx;
				}
			}

			.swiper-text {
				z-index: 10;
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #fff;
				font-size: 30rpx;
				color:  #000000;
				font-family: PingFang SC;
			}
		}

		.active {
			opacity: 1;
			z-index: 10;
			height: 429rpx;
			width: 552rpx;
			top: 1%;

		}





	}
</style>
